/*
 * @Author: yangzonglong
 * @Date: 2021-03-05 11:20:41
 * @version: v1.0.0
 * @Descripttion: formItem 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-10-09 14:19:16
 * @Auditor:
 */
import React from 'react';
import { memo, useCallback, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { Select } from '@library';
import { regExpSource } from '../../config';
import { Form, Input, Slider, Checkbox, Radio, Modal } from 'antd';
import ShowPrintController from './ShowPrintController';
import { FormItemProps as _FormItemProps } from 'antd/lib/form';
import Icon from './../icon/Icon';
import styles from './style.module.scss';
export interface FormItemProps extends _FormItemProps {
  print?: boolean;
  hideInput?: boolean;
  disabled?: boolean;
  radio?: boolean;
  checkRule?: string;
  placeholder?: string;
  placeholderEn?: string;
  labelEn?: string;
  showTooltip?: boolean;
  tooltip?: string;
  tooltipEn?: string;
  scriptText?: string;
  tooltipWidth?: number;
  treeStructure?: boolean;
  treeId?: string;
  treeParentId?: string;
}

const FormItem = Form.Item;
const ftStyle = { marginBottom: '8px' };
const fieldNames = { label: 'label', value: 'value' };
const extensions = [javascript({ jsx: true })];
interface IProps {
  type?: string;
  onChange(k: string, v: any): void;
  options?: FormItemProps;
  inputProps?: any;
  showFiledArray?: any[];
  showComponentsArray?: any[];
  placeholder?: string;
  placeholderEn?: string;
  initialValue?: string;
  initialValueEn?: string;
  onChangeControlProps?(key: string | any, value?: string): void;
  children?: React.ReactNode;
  hidePlaceholder?: boolean; // 为true时隐藏placeholder
  hideInitialValue?: boolean;
  textArea?: boolean;
}

export default memo(
  ({ options, onChange, placeholder,
    initialValue, initialValueEn, onChangeControlProps, children,
    hidePlaceholder, placeholderEn, inputProps, showFiledArray,
    showComponentsArray, textArea }: IProps) => {

    const [visible, setVisible] = useState(false);
    const [codeMirrorValue, setCodeMirrorValue] = useState('');

    const onChangeName = useCallback((e) => onChange('name', e.target.value), [onChange]);
    const onChangeLabel = useCallback((e) => onChange('label', e.target.value), [onChange]);
    const onChangeLabelEn = useCallback((e) => onChange('labelEn', e.target.value), [onChange]);
    const onChangeRequired = useCallback((e) => onChange('required', e.target.checked), [onChange]);
    const onChangeDisabled = useCallback((e) => onChangeControlProps?.('disabled', e.target.checked), [onChangeControlProps]);

    const onChangeWidth = useCallback(
      (e) => {
        onChange('style', { ...options?.style, width: e.target.value });
      },
      [onChange, options]
    );

    const onChangeTextAlign = useCallback(
      (e) => {
        onChange('style', { ...options?.style, textAlign: e.target.value });
      },
      [onChange, options]
    );

    function show() {
      setVisible(true);
      setCodeMirrorValue(options?.scriptText || '');
    }

    function onOk() {
      setVisible(false);
      onChange('scriptText', codeMirrorValue);
      setCodeMirrorValue('');
    }

    function onCancel() {
      setVisible(false);
      setCodeMirrorValue('');
    }

    return (
      <>
        <FormItem label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
          <Input onChange={onChangeName} value={options?.name as string} />
        </FormItem>


        <FormItem label="标题">
          <Input placeholder="请输入" onChange={onChangeLabel} value={options?.label as string} />
        </FormItem>

        <FormItem label="标题(EN)">
          <Input placeholder="请输入" onChange={onChangeLabelEn} value={options?.labelEn as string} />
        </FormItem>


        {!hidePlaceholder && (
          <>
            <FormItem label="占位符文本">
              <Input placeholder="请输入" onChange={(e) => onChangeControlProps?.('placeholder', e.target.value)} value={placeholder} />
            </FormItem>
            <FormItem label="占位符文本(EN)">
              <Input placeholder="请输入" onChange={(e) => onChangeControlProps?.('placeholderEn', e.target.value)} value={placeholderEn} />
            </FormItem>
          </>
        )}


        <FormItem className="antd-form-item-row" label="显示提示信息">
          <Checkbox
            checked={options?.showTooltip}
            onChange={(e) => onChange('showTooltip', e.target.checked)} />
        </FormItem>
        {options?.showTooltip && (
          <>
            <FormItem label="提示信息">
              <Input.TextArea
                placeholder='请输入'
                value={options.tooltip}
                onChange={(e) => onChange('tooltip', e.target.value)} />
            </FormItem>
            <FormItem label="提示信息(EN)">
              <Input.TextArea
                placeholder='请输入'
                value={options.tooltipEn}
                onChange={(e) => onChange('tooltipEn', e.target.value)} />
            </FormItem>

            <div style={{ position: 'relative' }}>
              <FormItem label='脚本内容'>
                <CodeMirror
                  extensions={extensions}
                  onChange={(value: string) => { onChange('scriptText', value); }}
                  value={options?.scriptText} />
              </FormItem>
              <Icon
                className={styles.screenIcon}
                icon='&#xe67c;'
                onClick={show} />
              <Modal
                visible={visible}
                title='脚本'
                width={1000}
                onCancel={onCancel}
                onOk={onOk}>
                <CodeMirror
                  extensions={extensions}
                  onChange={setCodeMirrorValue}
                  value={codeMirrorValue} />
              </Modal>
            </div>

            <FormItem label="自定义宽度">
              <Input
                suffix={<span>PX</span>}
                placeholder='请输入'
                value={options.tooltipWidth}
                onChange={(e) => {
                  if (!isNaN(Number(e.target.value))) {
                    onChange('tooltipWidth', Number(e.target.value));
                  }
                }} />
            </FormItem>
          </>
        )}

        <FormItem label="校验规则">
          <Select
            value={options?.checkRule as string}
            allowClear
            dataSource={regExpSource}
            onClear={() => onChange('checkRule', undefined)}
            onSelect={(e: any) => onChange('checkRule', e)}
            fieldNames={fieldNames}
            url=""
            placeholder="请选择校验规则"
          />
        </FormItem>

        <FormItem label="关联已有数据">
          <FormItem>
            <Select
              allowClear
              dataSource={showComponentsArray}
              onClear={() => onChangeControlProps?.({ bindName: undefined, showFiled: undefined })}
              style={ftStyle}
              value={inputProps?.bindName}
              onSelect={(e: any) => onChangeControlProps?.({ bindName: e, showFiled: undefined })}
              fieldNames={fieldNames}
              url=""
              placeholder="请选择组件"
            />
          </FormItem>
          <FormItem>
            <Select
              value={inputProps?.showFiled}
              onSelect={(e: any) => onChangeControlProps?.('showFiled', e)}
              dataSource={showFiledArray}
              fieldNames={fieldNames}
              url=""
              placeholder="请选择显示字段"
            />
          </FormItem>
        </FormItem>

        {children}

        <FormItem label="字段占比">
          <Radio.Group value={options?.style?.width} onChange={onChangeWidth}>
            <Radio.Button value={'25%'}>25%</Radio.Button>
            <Radio.Button value={'50%'}>50%</Radio.Button>
            <Radio.Button value={'75%'}>75%</Radio.Button>
            <Radio.Button value={'100%'}>100%</Radio.Button>
          </Radio.Group>
        </FormItem>

        <FormItem label="对齐方式">
          <Radio.Group value={options?.style?.textAlign} onChange={onChangeTextAlign}>
            <Radio.Button value={'left'}>左对齐</Radio.Button>
            <Radio.Button value={'center'}>居中对齐</Radio.Button>
            <Radio.Button value={'right'}>右对齐</Radio.Button>
          </Radio.Group>
        </FormItem>

        <FormItem className="antd-form-item-row" label="必填">
          <Checkbox onChange={onChangeRequired} checked={options?.required} />
        </FormItem>

        <FormItem className="antd-form-item-row" label="禁用">
          <Checkbox onChange={onChangeDisabled} checked={inputProps?.disabled === undefined ? inputProps?.bindName : inputProps?.disabled} />
        </FormItem>

        <FormItem className="antd-form-item-row" label="字体加粗">

          <Checkbox onChange={(e) => onChange('style', { ...options?.style, fontWeight: e.target.checked ? 'bold' : 'normal' })} checked={options?.style?.fontWeight === 'bold'} />
        </FormItem>


        <FormItem label="默认值">
          {textArea ? <Input.TextArea placeholder="请输入默认值" onChange={(e) => onChangeControlProps?.('initialValue', e.target.value)} value={initialValue as string} /> : <Input placeholder="请输入默认值" onChange={(e) => onChangeControlProps?.('initialValue', e.target.value)} value={initialValue as string} />}
        </FormItem>

        <FormItem label="英文默认值">
          {textArea ? <Input.TextArea placeholder="请输入英文默认值" onChange={(e) => onChangeControlProps?.('initialValueEn', e.target.value)} value={initialValueEn as string} /> : <Input placeholder="请输入默认值" onChange={(e) => onChangeControlProps?.('initialValueEn', e.target.value)} value={initialValueEn as string} />}
        </FormItem>

        {!textArea && (
          <>
            <Form.Item label="前辍" >
              <Input
                value={inputProps?.prefix}
                onChange={e => onChangeControlProps?.('prefix', e.target.value)} />
            </Form.Item>

            <Form.Item label="后辍" >
              <Input
                value={inputProps?.suffix}
                onChange={e => onChangeControlProps?.('suffix', e.target.value)} />
            </Form.Item>

          </>
        )}

        <ShowPrintController onChange={onChange} print={options?.print}
        />

        <FormItem label="打印标题字体大小">
          <Slider
            min={12}
            max={50}
            value={Number(inputProps?.titleFont || 0)}
            onChange={(e: any) => {
              onChangeControlProps?.('titleFont', String(e));
            }} />


        </FormItem>

        <FormItem label="打印内容字体大小">
          <Slider
            min={12}
            max={50}
            value={Number(inputProps?.contentFont || 0)}
            onChange={(e: any) => {
              onChangeControlProps?.('contentFont', String(e));
            }} />
        </FormItem>

        <FormItem className="antd-form-item-row" label="隐藏域">
          <Checkbox onChange={(e) => {
            onChange('hideInput', e.target.checked);
          }} checked={options?.hideInput} />
        </FormItem>
      </>
    );
  }
);
